<template>
	<a-drawer
		title="实时监控"
		:width="600"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-divider v-if="cameraList.length > 0">视频播放区域</a-divider>
		<a-list :data-source="cameraList" v-if="cameraList.length > 0">
			<template #renderItem="{ item }">
				<a-list-item>
					<a-list-item-meta
						:description="`设备代码：${item.videoCode}   流地址：${videoOptions.src || '无'}`">
						<template #title>
							<span>监控名称：{{ item.videoName }}</span>
						</template>
					</a-list-item-meta>
					<template #actions>
						<a-button type="primary" @click="play(item.videoCode)">{{
							videoOptions.src ? '重新获取播放地址' : '获取播放地址'
							}}
						</a-button>
					</template>
				</a-list-item>
			</template>
		</a-list>
		<videoPlay v-bind="videoOptions" v-if="videoOptions.src"/>
		<a-divider v-if="cameraList.length > 0">设备列表区域</a-divider>
		<a-list :data-source="cabinetInfoList">
			<template #renderItem="{ item }">
				<a-list-item>
					<template #actions>
						<a @click="loadCameraList(item)">获取摄像头列表</a>
					</template>
					<a-list-item-meta>
						<template #title>
							<!--							{{item}}-->
							<span>柜子名称：{{ item.cabinetName }}</span>
						</template>
					</a-list-item-meta>
				</a-list-item>
			</template>
		</a-list>
	</a-drawer>
</template>

<script setup name="deviceVideo">
	import 'vue3-video-play/dist/style.css'
	import {videoPlay} from 'vue3-video-play'
	import {message} from 'ant-design-vue'
	import bizVideoApi from '@/api/biz/bizVideoApi'
	import bizCabinetInfoApi from "@/api/biz/bizCabinetInfoApi";
	import bizCabinetInfoReagentApi from "@/api/biz/bizCabinetInfoReagentApi";
	// 抽屉状态
	const visible = ref(false)
	const cabinetInfoList = ref([])
	const cameraList = ref([])
	let deviceCode = null
	const videoOptions = reactive({
		width: '556px', //播放器高度
		height: '417px', //播放器高度
		src: null, //视频源
		type: 'm3u8',
		muted: false, //静音
		webFullScreen: false,
		autoPlay: false, //自动播放
		loop: false, //循环播放
		control: true //是否显示控制器
	})
	// 打开抽屉
	const onOpen = (cabinetGroupId, isReagent) => {
		if (isReagent) {
			bizCabinetInfoReagentApi.bizCabinetList({
				groupId: cabinetGroupId
			}).then(res => {
				cabinetInfoList.value = res
			})
		} else {
			bizCabinetInfoApi.bizCabinetList({
				groupId: cabinetGroupId
			}).then(res => {
				cabinetInfoList.value = res
			})
		}
		visible.value = true
	}
	const loadCameraList = (item) => {
		bizVideoApi.bizQueryCameraList({
			deviceCode: item.cabinetCode
		}).then((res) => {
			cameraList.value = res.map(d => {
				return {
					...d,
					videoName: item.cabinetName + "-" + d.videoName
				}
			})
		})
	}
	const play = (videoCode) => {
		if (videoCode && deviceCode) {
			bizVideoApi
				.bizQueryLiveStreamUrl({
					deviceCode: deviceCode,
					videoCode: videoCode
				}).then((res) => {
				videoOptions.src = res.videoUrl
			})
		} else {
			message.error('未获取到正确的播放地址，请联系管理员')
		}
	}
	// 关闭抽屉
	const onClose = () => {
		deviceCode = null
		videoOptions.src = null
		cameraList.value = []
		visible.value = false
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
